<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="welcome-card">
          <el-card shadow="hover">
            <div class="welcome-content">
              <div class="avatar-wrapper">
                <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar" alt="">
              </div>
              <div class="welcome-text">
                <h2>欢迎回来, {{ name }}!</h2>
                <p>{{ welcomeMessage }}</p>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="dashboard-recent-activity">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>最近活动</span>
          </div>
          <el-table
            :data="recentActivities"
            style="width: 100%"
            stripe
          >
            <el-table-column
              prop="time"
              label="时间"
              width="180">
            </el-table-column>
            <el-table-column
              prop="user"
              label="用户"
              width="180">
            </el-table-column>
            <el-table-column
              prop="action"
              label="操作">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      userAvatar: this.avatar,
      userCount: 1024,
      todayTasks: 5,
      newUsers: 12,
      welcomeMessage: '希望今天一切顺利!',
      recentActivities: [
        { time: '2024-03-01 09:30', user: '系统管理员', action: '登录系统' },
        { time: '2024-03-01 10:15', user: '张三', action: '修改用户权限' },
        { time: '2024-03-01 11:45', user: '李四', action: '创建新角色' },
        { time: '2024-03-01 14:20', user: '王五', action: '更新系统配置' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'name',
      'avatar',

    ])
  },
  methods: {
    // 可以添加其他方法，如获取实时数据
    fetchDashboardData() {
      // 从后端获取最新数据的方法
    }
  },
  created() {
    // 页面创建时获取数据
    this.fetchDashboardData()
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
}

.welcome-card {
  margin-bottom: 20px;
}

.welcome-content {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 20px;
  width: 80px;
  height: 80px;
  border-radius: 40px;
}

.welcome-text h2 {
  margin: 0;
  color: #303133;
}

.welcome-text p {
  margin: 5px 0 0;
  color: #909399;
}

.dashboard-stats .stat-item {
  display: flex;
  align-items: center;
}

.stat-icon {
  font-size: 36px;
  margin-right: 15px;
  color: #409EFF;
}

.stat-content h3 {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.stat-number {
  margin: 5px 0 0;
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}
</style>
